import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon, Grid, Flex, Tag, List } from 'antd-mobile';

// style
import styles from './sidebar.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class LeftSidebar extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	inputValue: ''
        }
    } 
   	onInputChange(e) {
	   	this.setState({
	   		inputValue: e.target.value
	   	})
   }
	render() {
		const { isShowSidebar, onClose, onSearch } = this.props

	 	return (
 			<div className={styles['home-top-sidebar']}>
 				<div className={styles['home-top-sidebar-wrap']}
 					 style={isShowSidebar ? {left: 0} : null} >
 					<div className={styles['home-top-sidebar-input-wrap']}>
 						<input 
 							value={this.state.inputValue}
 							onChange={this.onInputChange}
 							placeholder="店铺内搜索" 
 							className={styles['home-top-sidebar-input']} 
 						/>
 						<div className={styles['home-top-sidebar-input-icon-wrap']} onClick={() => {
 							onSearch && onSearch(this.state.inputValue)

 							onClose && onClose()
 						}}>
 							<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-search']} ${styles['home-top-sidebar-input-icon']}`} style={{fontSize: '0.4rem', color: '#fff', position: 'relative', bottom: '0.08rem'}}/>
 						</div>
 					</div>
 				</div>
 				<div className={styles['home-top-sidebar-mask']}
 					onClick={onClose}
 					style={isShowSidebar ? {display: 'block'} : null}></div>
 			</div>
	  	);
	}
};

LeftSidebar.propTypes = {
};

export default LeftSidebar
